<template>
    <section>
        <div class="wrapper">
            <div class="title">
                <span>会员名册</span>
                <i @click="search = !search" :class="search?'close':''"></i>
            </div>

            <div class="search" v-show="search">
                <input type="text"  placeholder="请输入会员姓名进行检索"  v-model="userName" @input="e => userName = validForbid(e.target.value)">
                <img src="@/mobile/imgs/search.png" alt="" @click="query()">
            </div>
            <van-loading size="30px" v-if="isLoading" vertical style="padding:30px;">加载中...</van-loading>
            <ul>

                <li v-for="(item,index) in memberList" :key="index">
                    <a :name="item.initials">{{ item.initials }}</a>
                    <div v-for="(user,index) in item.list" :key="index" @click="$troute.query('mmDetail',user.userId);">
                        <div class="img-box">
                            <!-- <img :src="user.photograph" alt="" v-if="user.photograph"> -->
                            <img :src="'https://i.hunnu.edu.cn/ums/avatar/'+user.userAccount" alt="">
                        </div>

                        <div class="UInformation">
                            <h4>{{ user.userName }}</h4>
                            <p>{{ user.unionName }}</p>
                        </div>
                    </div>
                </li>
            </ul>

            <dl>
                <dt><a>#</a></dt>
                <dt v-for="(item,index) in floor" :key="index"><a :href="item | anchor">{{ item }}</a></dt>
            </dl>
        </div>
    </section>
</template>
<script>
import api from "@/data/api/index.js";

export default {
    data(){
        return{
            search: false,
            memberList: [],
            params: {},
            userName: '',  // 会员姓名
            curPage:1,//当前页码
            pageSize:3,//一页显示数据条数
            isLoading:true,
            floor: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
        }
    },
    mounted() {
        this.getList(this.params);
    },
    methods: {
        getList(params){
            api.getUnionUser(params).then(res => {
                if(Array.isArray(res)){
                    this.isLoading=false
                    let tableData = res
                    if(tableData.length >this.pageSize){
                        this.memberList = []
                        this.memberList = tableData .slice(0,this.pageSize)
                        let times=setInterval( () => {//加载下一页内容
                            if(this.curPage*this.pageSize >= tableData.length){
                                clearInterval(times)
                            }
                            let bPage=this.curPage;
                            this.curPage++
                            this.memberList = this.memberList.concat(tableData.slice(bPage,this.curPage*this.pageSize))
                        },1000)

                    }else{
                        this.memberList =  tableData
                    }
                }
            });
        },
        // 获取工会信息
        getUnionInfo(id){
            api.unionInfo(id).then(res => {
                return res.unionName;
            });
        },
        // 检索
        query(){
            this.params.userName=this.userName;
            this.getList(this.params);
        },
    },
    filters: {
        anchor: function(value){
            return "#"+value;
        },
    },
    
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
}
.wrapper{
    padding: 20px 0;
    background-color: #fff;
    .title{
        display: flex;
        padding: 0 20px 10px;
        align-items: center;
        border-bottom: 3px solid #F4F4F4;
        span{
            flex-grow: 1;
            font-size: 18px;
        }
        i{
            display: inline-flex;
            width: 22px;
            height: 23px;
            background: url(../imgs/search.png) no-repeat;
            background-size: contain;
        }
        .close{
            width: 15px;
            height: 15px;
            background-image: url(../imgs/close.png);
        }
    }
    .search{
        position: absolute;
        left: 0;
        right: 0;
        padding: 15px 20px;
        background-color: #fff;
        box-shadow: 0 2px 4px #f1f1f1;
        z-index: 999;
        input{
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            background-color: #eee;
            border-radius: 5px;
            box-sizing: border-box;
        }
        img{
            position: absolute;
            top: 29px;
            right: 35px;
            height: 22px;
        }
    }
    ul {
        // position: absolute;
        // top: 100px;
        // left: 0;
        // right: 0;
        // bottom: 0;
        overflow: auto;
        li{
            padding: 0 40px 15px 15px;
            border-bottom: 3px solid #F4F4F4;
            &:last-child{
                padding-bottom: 30px;
                border-bottom: none;
            }
            a{
                display: inline-block;
                font-size: 16px;
                margin-left: 5px;
                padding-top: 15px;
            }
            
            >div{
                margin-top: 12px;
                display: flex;
                justify-content: space-between;
                .img-box{
                  float: left;
                  width: 50px;
                  height: 50px;
                  background-color: #E3DDC7;
                  border-radius: 50%;
                  overflow: hidden;
                  img{
                      min-height: 100%;
                  }
                }
                .UInformation{
                    width: calc(100% - 60px);
                    font-size: 16px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #E2E2E2;
                    p{
                        color: #666;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
                &:last-child div{
                    border-bottom: none;
                }
            }
        }
    }
    dl{
        position: fixed;
        top: 104px;
        right: 15px;
        z-index: 9;
        dt a{
            display: block;
            width: 15px;
            line-height: 17px;
            color: #666;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
        }
    }
}
</style>